<template>
  <div class="lecturer-detail">
    <back />
    <el-card>
      <template #header>
        <div class="header">
          <div class="header-top">
            <img v-if="user?.avatar" class="avatar" :src="user?.avatar" alt="头像" />
            <img v-else class="avatar" src="@/assets/images/default-avatar.png" alt="头像" />
            <div class="header-top-right m-l-10">
              <div class="header-top-right-info">
                <div class="flex">
                  <span>{{ user.nickName }}</span>
                  <img class="m-l-10" style="width: 24px" src="@/assets/images/male.png" />
                </div>
                <div class="m-t-10">
                  <span class="color-gray">职称：</span>
                  <span>{{ user.professionalTitle }}</span>
                </div>
              </div>
              <el-button plain type="primary" @click="doContact">联系Ta</el-button>
            </div>
          </div>
          <div class="header-footer">
            <div>
              <span class="color-gray">所在单位：</span>
              <span>{{ user.company }}</span>
            </div>
            <div>
              <span class="color-gray">单位性质：</span>
              <span>{{ user.unitNature }}</span>
            </div>
            <div>
              <span class="color-gray">手机号：</span>
              <span>{{ user.phonenumber }}</span>
            </div>
            <div>
              <span class="color-gray">邮箱：</span>
              <span>{{ user.email }}</span>
            </div>
            <div>
              <span class="color-gray">行业领域：</span>
              <el-tag
                class="m-b-10 m-r-10"
                v-for="(name, index) in user.industrySector"
                :key="index"
              >
                {{ name }}
              </el-tag>
            </div>
          </div>
        </div>
      </template>
      <div v-html="user.briefIntroduction" class="wang-editor-html"></div>
    </el-card>
    <chatDialog ref="chatDialogRef" :user="user" />
  </div>
</template>

<script setup lang="ts">
import { getLecturerById } from '@/api/system';
import back from '@/components/back/index.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import chatDialog from '@/components/chat-dialog/index.vue';
import { ElMessage } from 'element-plus';
import { getLoginUserId } from '@/utils/storage';

const route = useRoute();
const user = ref({} as any);
onMounted(() => {
  const id = route.query.id as string;
  getLecturerById(id).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      user.value = res.data;
    }
  });
});

// 联系讲师
const chatDialogRef = ref<InstanceType<typeof chatDialog> | null>(null);
function doContact() {
  if (user.value.userId === getLoginUserId()) {
    ElMessage({
      message: '不能将消息发给自己！',
      type: 'error',
    });
    return;
  }
  if (chatDialogRef.value) {
    chatDialogRef.value.dialogFormVisible = true;
  }
}
</script>

<style lang="scss" scoped>
.lecturer-detail {
  padding: 20px 100px;
  .header {
    padding: 0 20px;
    &-top {
      display: flex;
      .avatar {
        width: 60px;
        height: 60px;
        object-fit: cover;
      }
      &-right {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    &-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      div {
        width: 48%;
        margin-top: 15px;
      }
    }
  }
}
</style>
